<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<script src="../js/vue.js"></script>
<body>
    <div id="root">
        
    </div>
    <script>
        Vue.config.productionTip = false;
        const student = Vue.extend({
            name:"student",
            data(){
                return {
                    name:"张三",
                    age:22
                }
            },
            template:`
            <div>
                <h2>姓名：{{name}}</h2>
                <h2>年龄：{{age}}</h2>
            </div>
            
            `
        })
        const school = Vue.extend({
            name: "school",
            data() {
                return {
                    name: "尚硅谷",
                    address: "北京"
                }
            },
            template: `
            <div>
                <h2>学校：{{name}}</h2>
                <h2>地址：{{address}}</h2>
                <student></student>
            </div>
            `,
            components:{
                student
            }
        });
        const hello = {
            name:"hello",
            data() {
                return {
                    msg:"你好啊！"
                }
            },
             template: `
            <h2>{{msg}}</h2>
            `
        };
        const app = Vue.extend({
            name:"app",
            template:`
            <div>
                <hello></hello>
                <school></school>    
            </div>
            `,
            components:{
                hello,
                school
            }
        })
        new Vue({
            el: "#root",
            template:`
            <app></app>
            `,
            components: {
               app
            }
        })
    </script>
</body>

</html>